1. index.html新增日記功能

選擇心情顏色

透過 <select> 選擇代表心情的顏色，選擇的顏色會存入日記物件中，用在歷史頁面呈現視覺效果

<select id="moodSelect">
  <option value="#9CD095">開心 😊</option>
  <option value="#FFE66F">平靜 🌤️</option>
  <option value="#FFD2D2">生氣 😡</option>
  <option value="#ACD6FF">傷心 😢</option>
</select>

儲存日記

系統會將圖片（壓縮後）、文字、顏色與建立時間封裝成一個物件，並賦予唯一 ID（使用 uid() 函數生成），再存入 localStorage

const entry = {
  id: uid(),
  image: compressedImage,
  text: diaryText.value,
  color: moodSelect.value,
  createdAt: new Date().toISOString()
};

2. 歷史回憶與顏色呈現

在 history.html 頁面，系統會：

1. 從 localStorage 讀取所有日記
2. 將每筆日記渲染成卡片，卡片背景使用儲存的顏色，直觀呈現當時心情
   (顏色功能讓使用者可以一眼看出不同心情日記，例如藍色代表傷心，黃色代表平靜。)
3. 卡片顯示：

• 上方日期
• 照片
• 文字摘要（超過 120 字會截斷）
• 建立時間
• 編輯與刪除按鈕

編輯日記功能

編輯功能透過編輯按鈕與 modal 視窗實現，當點擊卡片上的「編輯」按鈕或 overlay 中的編輯按鈕，系統會找到該日記的 id，將文字、顏色與圖片載入編輯表單，使用者可以修改：

• 文字
• 心情顏色
• 選擇新圖片（選填）

儲存時會：

• 更新文字與顏色
• 如果有新圖片，先壓縮再更新
• 更新 localStorage，重新渲染日記列表
  (使用唯一 ID 讓系統可以精準修改特定日記，而不影響其他日記)

entry.text = newText;
entry.color = editColor.value;
entry.image = compressedImageIfAny;
saveAll();
renderGrid();

刪除日記功能

在每張卡片提供「刪除」按鈕：
點擊按鈕後，彈出確認視窗，確認後，使用 splice() 移除該筆日記資料。更新 localStorage，重新渲染卡片。但注意！這樣刪除後，日記會立即從畫面消失，並且無法復原

diaries.splice(index, 1);
saveAll();
renderGrid();

那麼明天會把完整的頁面展示給大家看！